<template>
  <div>
    <van-nav-bar title="个人中心" left-text="返回" left-arrow @click-left="onClickLeft" />
  </div>


  <div style="background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh;">
    <!-- 头像处理 -->
    <div class="app-userinfo-div">
      <div class="app-avatar-div">
        <el-avatar
            style="width: 150px; height: 150px; box-shadow: 0 8px 16px rgba(0,0,0,0.1);"
            :src="form.avatarImg?form.avatarImg:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
            class="avatar-style"
        />
        <div class="upload-icon-wrapper">
          <van-uploader :after-read="onRead">
            <van-icon name="photograph" class="custom-icon"/>
          </van-uploader>
        </div>
      </div>
    </div>
    <div class="info-card">
      <div class="title-section">
        <p>编辑信息</p>
      </div>
      <div class="input-group">
        <label>昵称</label>
        <van-field
          v-model="form.nickName"
          placeholder="请输入昵称"
          class="custom-field"
        />
      </div>
      <div class="input-group">
        <label>手机号</label>
        <van-field
          v-model="form.phone"
          placeholder="请输入手机号"
          class="custom-field"
        />
      </div>
      <div class="input-group">
        <label>电子邮箱</label>
        <van-field
          v-model="form.email"
          placeholder="请输入邮箱"
          class="custom-field"
        />
      </div>
      <div class="button-group">
        <van-button round type="danger" class="action-button" @click="updateUserInfo()">保存信息</van-button>
        <van-button round type="danger" plain class="action-button" @click="userLogout()">退出登录</van-button>
      </div>
    </div>
  </div>


</template>

<script setup>
import {ref} from "vue";
import {GetUserInfo, updateAvatarImgJs, updateUserInfoJs, userLogoutJs} from "@/api/user";
import {ElMessage} from "element-plus";
import router from "@/router";


const onClickLeft = () => history.back();

const form = ref({
  nickName: "",
  phone: "",
  email: "",
  avatarImg: null,
})

// 处理文件的方法
function onRead(file) {
  const formData = new FormData();
  formData.append('file', file.file);
  updateAvatarImgJs(formData).then(res=>{
    if(res.data.code == 200000){
      form.value.avatarImg = res.data.data
      ElMessage.success("上传成功")
    }else {
      ElMessage.error("上传失败")
    }
  })
}

// 获取当前登录用户
function getUserInfo() {
  GetUserInfo().then(res => {
    if (res.data.code == 200000) {
      form.value = res.data.data
      console.log(res.data)
  }
  })
}
getUserInfo()

// 修改用户基本信息x
function updateUserInfo() {
  console.log(form.value)
  updateUserInfoJs(form.value).then(res => {
    if (res.data.code == 200000) {
      ElMessage.success(res.data.errorMessage)
      // 登录成功之后返回登录页面，清除token
      router.push("/user/login")
      localStorage.removeItem("token")
    } else {
      ElMessage
          .error(res.data.errorMessage)
    }
  })
}

// 退出登录
function userLogout(){
  userLogoutJs().then(res=>{
    if(res.data.code == 200000){
      ElMessage.success(res.data.errorMessage)
      router.push("/user/login")
      localStorage.removeItem("token")
    }else{
      ElMessage.success(res.data.errorMessage)
    }
  })
}


</script>

<style>
.info-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 30px;
  margin: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  position: relative;
  bottom: -30px;
}

.underline-input {
  border: none;
  background: rgba(245, 247, 250, 0.6);
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-bottom: 25px;
  font-size: 15px;
  width: 100%;
  max-width: 350px;
  padding: 12px 15px;
}

.underline-input:focus {
  background: rgba(245, 247, 250, 0.9);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* 覆盖 Element Plus 的默认样式 */
:deep(.el-input__wrapper) {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

:deep(.el-input__inner) {
  color: #333;
}

:deep(.el-input__inner::placeholder) {
  color: #999;
  font-size: 14px;
}

/* 标签样式 */
label {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  display: inline-block;
  font-weight: 500;
}

/* 输入框组样式 */
.input-group {
  margin-bottom: 24px;
}

.input-group:hover {
  background: rgba(245, 247, 250, 0.5);
}

/* 按钮样式优化 */
.button-group {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 40px;
  padding: 0 20px;
}

.action-button {
  min-width: 130px;
  height: 44px;
  font-size: 16px;
  border-radius: 22px;
  transition: all 0.3s ease;
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.2);
}

/* 如果需要更大间距，可以给按钮添加外边距 */
.action-button + .action-button {
  margin-left: 0;
}

/* 标题部分样式优化 */
.title-section {
  margin-bottom: 35px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.title-section p {
  color: #333;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.5px;
}

.upload-icon-wrapper {
  position: absolute;
  bottom: -10px;
  right: -10px;
  background: white;
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.custom-icon {
  width: 24px;
  height: 24px;
  color: #ff4757;
}

.avatar-style {
  border: 4px solid white;
  filter: none;
  transition: transform 0.3s ease;
}

.avatar-style:hover {
  transform: scale(1.05);
}

/* 覆盖 Element Plus 的默认样式 */
.el-input__wrapper {
  padding: 8px 0;
}

:deep(.van-nav-bar) {
  background: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

:deep(.van-button--danger) {
  background: #ff4757;
  border-color: #ff4757;
}

:deep(.van-button--danger.van-button--plain) {
  color: #ff4757;
  background: white;
}

.input-group {
  margin-bottom: 24px;
}

.custom-field {
  background: rgba(245, 247, 250, 0.6);
  border-radius: 8px;
  margin-top: 8px;
}

:deep(.van-field) {
  padding: 12px 16px;
  background: transparent;
}

:deep(.van-field__control) {
  color: #333;
  font-size: 15px;
}

:deep(.van-field__control::placeholder) {
  color: #999;
}

:deep(.van-cell) {
  background: transparent;
  padding: 0;
}

:deep(.van-cell::after) {
  display: none;
}

/* 移除 van-field 的默认边框 */
:deep(.van-field__body) {
  background: transparent;
}

/* 输入框激活状态 */
.custom-field:focus-within {
  background: rgba(245, 247, 250, 0.9);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* 标签样式 */
label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

/* 确保输入框容器样式正确 */
.info-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 30px;
  margin: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
</style>